syslib.namespace("syslib.ui.AccordeonItem");

syslib.ui.AccordeonItem = __class(syslib.ui.UIComponent, {
	__componentName : "syslib.ui.AccordeonItem",
	
	__body : null, 
	__title : null, 
	
	accordeon : null,
	index : null,  
	selected : false, 
	options = {}, 

	__construct: function(options){
		// set the options
		this.optoins = __extend({
			id : (__valid(options.id)) ? options.id : syslib.element.generateID(), 
			selected : false, 
			icon : false
		}, options);
	
		// set the default values
		this.accordeon	= null; 
		this.index		= null;
		this.selected 	= false;
	},

	__createElement : function(){
		// get the options
		var options = this.options;
		
		// json structure
		var elemtJSON = ["div", {"class" : "syslib-accordeon-item-normal", "id" : options.id}, 
			["div", {"class" : "syslib-accordeon-item-title", "innerName" : "title"}],
			["div", {"class" : "syslib-accordeon-item-body-hidden", "innerName" : "body"}]
		];
		
		// create the element
		var accordeonItemData 	= syslib.element.createFromJSON(elemtJSON);
		
		// get the instances
		var references			= accordeonItemData.references;
		var element				= accordeonItemData.element;
		var title				= references.title;
		var body				= references.body;
		
		// store the elements
		this.__body	= body;
		this.__title = title;

		// update the title 
		if(options.icon){
			// get the icon
			var icon = options.icon;
			
			// update the innerHTML
			title.innerHTML = "<img width='16' height='16' src='"+icon+"' border='0' align='absmiddle' />" + options.label;
		} else {
			// update the innerHTML
			title.innerHTML = options.label;
		}
		
		// set the element
		this.__element = element;
		
		// set the events
		syslib.event.listen("mouseover", title, function(){
			if(!this.selected){
				this.__over();
			}
		}.applyTo(this));
		syslib.event.listen("mouseout", title, function(){
			if(!this.selected){
				this.__out();
			}
		}.applyTo(this));
		syslib.event.listen("click", title, function(){
			if(!this.selected){
				this.accordeon.selectItem(this.index);
			}
		}.applyTo(this));

		// return
		return element;
	},

	appentTo: function(accordeon){
		// append to the accordeon
		this.index = accordeon.appendChild(this);
		
		// select
		if(this.options.selected === true || this.index === 0){
			accordeon.selectItem(this.index);
		}
	},

	__select : function(){
		// update the style
		this.__body.className = "syslib-accordeon-item-body-normal syslib-text";
		this.__element.className = "syslib-accordeon-item-selected";
		
		// set as selected
		this.selected = true;
	},

	__unselect : function(){
		// update the style
		this.__body.className = "syslib-accordeon-item-body-hidden";
		this.__element.className = "syslib-accordeon-item-normal";
		
		// set as unselected
		this.selected = false;
	},

	__over : function(){
		this.__element.className = "syslib-accordeon-item-over";
	}, 
	
	__out : function(){
		this.__element.className = "syslib-accordeon-item-normal";
	}
});